<template>
  <view style="padding-top: 160rpx" class="bg-151518" v-show="loading" :style="'padding-bottom: calc(var(--window-bottom) + 50px)'" :class="themeClass">
    <view style="position: fixed; top: 0px; width: 100%; z-index: 99999" :style="{ backgroundColor: bgC ? '#fff' : '#151518' }">
      <u-navbar leftIconSize="0" class="" :placeholder="true">
        <view class="" slot="center" style="position: relative">
          <image v-if="bgC" style="width: 140rpx; height: 64rpx" src="@/static/zsk.png" mode="aspectFill"></image>
          <image v-else style="width: 140rpx; height: 64rpx" :src="httpurl + '/static/uniapp/img/logo.png'" mode="aspectFill"></image>
        </view>
      </u-navbar>
    </view>
    <u-gap class="6rpx"></u-gap>
    <view class="padding-0-30">
      <u-search
        @change="getVal"
        @search="search"
        searchIconColor="#7F818C"
        placeholderColor="#7F818C"
        borderColor="#3A3A4D"
        bgColor="#1D1E23"
        height="72rpx"
        :showAction="false"
        placeholder="请输入卡卷名称"
        :value="keyword"
      ></u-search>
    </view>
    <u-gap class="10rpx"></u-gap>
    <!-- <swiper interval="2000" duration="800" circular="true" :current="bgIndex" autoplay @change="handlerChange" class="swiper-wrapper">
      <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
        <view class="pos-rel swiper-item-content" @click="lunpig(index)">
          <image style="width: 690rpx" :src="item.url" mode="scaleToFill"></image>
        </view>
      </swiper-item>
    </swiper> -->
    <swiper circular autoplay="true" interval="2000" duration="500" @change="handlerChange" class="swiper-wrapper">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item" @click="lunpig(index)">
          <image style="width: 690rpx" :src="item.url" mode="scaleToFill"></image>
        </view>
      </swiper-item>
    </swiper>
    <u-gap height="26rpx"></u-gap>
    <view class="padding-0-30">
      <view :style="{ backgroundColor: bgC ? '#F7F7F7' : '#272735' }" class="item-bg border-radius-16 flex flex-wrap padding-b-28 flexagren">
        <view
          class="bg-img text-df flex flex-center flex-column padding-0-30"
          v-for="(item, index) in navlist"
          :key="index"
          @tap="goCard(item.id)"
          style="width: 204rpx; height: 196rpx"
        >
          <image style="width: 50rpx; height: 50rpx" :src="item.wapimage" mode="aspectFit"></image>
          <text :style="{ color: bgC ? '#000' : '#ffefcd' }" class="font28">{{ item.title }}</text>
        </view>
      </view>
    </view>
    <u-gap height="24rpx"></u-gap>
    <view class="padding-0-30">
      <view class="notice" @click="news()" v-show="noticeList.length > 0" :style="{ backgroundColor: bgC ? '#F7F7F7' : '#272735' }">
        <view class="notice-left">
          <image style="width: 120rpx; height: 28rpx; margin-right: 24rpx; margin-bottom: 16rpx" :src="httpurl + '/static/uniapp/img/icon_notice.png'" mode="scaleToFill"></image>
        </view>
        <swiper class="swiper-nav" style="color: #000" :circular="true" vertical="true" :autoplay="true" :interval="5000" :duration="1000">
          <swiper-item style="display: table" v-for="(item, index) in noticeList" :key="index">
            <view :style="{ backgroundColor: bgC ? '#F7F7F7' : '#272735', color: bgC ? '#000' : '#ffefcd' }" class="right font24 color-C2C2E4" v-html="item.messageContent"></view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <u-gap height="32rpx"></u-gap>
    <view class="renmen padding-0-30 flex flex-align-center flex-space-between">
      <view class="flex flex-alin-center">
        <image style="width: 36rpx; height: 48rpx; margin-right: 12rpx" :src="httpurl + '/static/uniapp/img/icon_hot.png'" mode="scaleToFill"></image>
        <text class="title">热门回收</text>
      </view>
      <view @click="handlerSwitch" class="flex flex-align-center font26 color-7E7E9E" :class="themeClass">
        更多
        <u-icon name="arrow-right" color="#7E7E9E"></u-icon>
      </view>
    </view>
    <u-gap height="30rpx"></u-gap>
    <view v-if="bgC" class="padding-0-30 flex flex-wrap flex-space-between" :class="themeClass">
      <view class="hot-item" v-for="(item, index) in avatar" :key="index" style="background-color: #f7f7f7">
        <view class="flex" :data-id="item.id" :data-typeid="item.cid" @tap="toChild">
          <view class="">
            <view style="display: flex; align-items: center">
              <image style="width: 120rpx; height: 120rpx; border-radius: 8rpx" :src="item.iconurl" mode="aspectFit"></image>
              <view style="margin-left: 30rpx" class="font28 title">{{ item.title }}</view>
            </view>
            <view style="display: flex; align-items: center">
              <view>{{ item.max_feilv }}</view>
              <view style="margin-top: 0; margin-left: 30rpx" class="text-center btn-exchange flex flex-center">兑换</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="padding-0-30 flex flex-wrap flex-space-between" :class="themeClass">
      <view class="hot-item" v-for="(item, index) in avatar" :key="index" style="background-color: #272735">
        <view class="flex" :data-id="item.id" :data-typeid="item.cid" @tap="toChild">
          <view class="">
            <view style="display: flex; align-items: center">
              <image style="width: 120rpx; height: 120rpx; border-radius: 8rpx" :src="item.iconurl" mode="aspectFit"></image>
              <view style="margin-left: 30rpx" class="font28 title">{{ item.title }}</view>
            </view>
            <view style="display: flex; align-items: center">
              <view>{{ item.max_feilv }}</view>
              <view style="margin-top: 0; margin-left: 30rpx" class="text-center btn-exchange flex flex-center">兑换</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="font-size: 20 rpx; color: #999; text-align: center; margin-bottom: 50rpx">
      <!-- #ifndef APP -->
      Copyright © {{ siteConfig.company }}
      <!-- #endif -->
      <br />
      <!-- #ifdef H5 -->
      <a style="color: #999" href="https://beian.miit.gov.cn">{{ siteConfig.beian }}</a>
      {{ siteConfig.beian_icp }}
      <br />
      {{ siteConfig.beian_wang }}
      <br />
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      {{ siteConfig.ruanzhu }}
      <!-- #endif -->
    </view>
    <!-- <v-footer  "tab" ="home" class="buttonmenu"></v-footer> -->
    <v-footer :tab="'home'" :bgColor="bgC" class="buttonmenu"></v-footer>
    <u-gap height="160rpx"></u-gap>
    <!-- #ifdef MP-WEIXIN -->
    <v-kefu @tap="tokefu()"></v-kefu>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tokefu()" class="">
      <v-kefu></v-kefu>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="">
      <v-zuti :bgC="bgC" @tap="tozuti()"></v-zuti>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tozuti()" class="">
      <v-zuti :bgC="bgC"></v-zuti>
    </view>
    <!-- #endif -->
    <!-- 客服的弹窗 -->
    <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
    <view v-if="guanzu" style="position: fixed; bottom: 120rpx; width: 610rpx; left: 64rpx">
      <official-account></official-account>
    </view>
    <u-popup z-index="99999999" :show="isPopupVisible" round="10" mode="center">
      <view class="jued" :style="{ backgroundColor: bgC ? '#F7F7F7' : '#272735' }">
        <view @click="xqValue">
          <image class="tipian" :src="imga" mode=""></image>
        </view>
        <view class="prop">{{ tit }}</view>
        <view :style="{ color: bgC ? '#F7F7F7' : '#272735' }" class="ss" @click="tiaoguo">跳过{{ countdownSeconds }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let _this;
import footer from '@/components/footer.vue';
import kefu from '@/components/kefu.vue';
import popup from '@/components/popup.vue';
import zitise from '@/components/zuti.vue';
export default {
  options: { styleIsolation: 'shared' },
  components: {
    'v-footer': footer,
    'v-kefu': kefu,
    'v-popup': popup,
    'v-zuti': zitise
  },
  data() {
    return {
      value11: '',
      loading: false,
      PageCur: 'home',
      noticeList: [],
      barHeight: 0,
      swiperList: [],
      navlist: [],
      curss: 0,
      avatar: [],
      swiperDotIndex: 0,
      dotsStyles: {
        bottom: 30,
        backgroundColor: 'rgba(83, 200, 249,0.3)',
        border: '1px rgba(83, 200, 249,0.3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
        selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
      },
      imgList: [],
      bgIndex: 0,
      keyword: '',
      iszhekou: '', //折扣
      siteConfig: null,
      isShow: 0, //控制客服弹出层
      gzh: true,
      currentTheme: '', //背景色
      bgC: false,
      guanzu: 'true', //控制关注公众号显示隐藏
      tit: '', //广告标题
      imga: '', //广告图片
      ids: '', //广告参数
      countdownSeconds: 6, // 初始倒计时秒数
      isPopupVisible: false, //广告弹窗
      httpurl: '' //图片链接
    };
  },
  onLoad() {
    const newTheme = this.currentTheme == 'light' ? 'light' : 'dark';
    this.setTheme(newTheme); // 调用setTheme方法更新本地存储和currentTheme
    // 组件挂载时从本地存储获取主题并更新currentTheme
    this.currentTheme = this.getTheme();
    //
    this.isShow = false;
    // this.fetchData()
    this.barHeight = uni.getSystemInfoSync().statusBarHeight;
    _this = this;
    this.loading = false;
    uni.showLoading({
      title: '加载中...'
    });
    this.getData();
    this.getInitData();
  },
  onShow() {
    this.httpurl = this.app.httpUrl;
    this.setTheme(this.currentTheme); // 调用setTheme方法更新本地存储和currentTheme
    uni.hideTabBar();
  },
  computed: {
    // 根据当前主题返回样式类名
    themeClass() {
      // 这里我们假设currentTheme已经是最新的主题状态
      // 在实际应用中，你可能需要在每次使用前从本地存储中获取它
      // 但为了简化示例，我们在这里直接返回
      return `theme-${this.currentTheme}`;
    }
  },
  mounted() {
    this.startCountdown(); //显示广告
    //关注公众号自带关闭
    setTimeout(() => {
      this.guanzu = false;
    }, 10000);
  },
  methods: {
    // 点击跳过直接关闭广告
    tiaoguo() {
      this.isPopupVisible = false;
    },
    // 点击广告跳转广告详情
    xqValue() {
      uni.navigateTo({
        url: `/pages/index/details?ids=${this.ids}`
      });
      console.log(123);
    },
    handleClose() {
      this.isPopupVisible = false; //关闭弹窗
      clearInterval(this.countdownInterval); // 清除定时器
    },
    startCountdown() {
      this.countdownInterval = setInterval(() => {
        if (this.countdownSeconds > 0) {
          this.countdownSeconds--;
        } else {
          this.handleClose(); // 倒计时结束，关闭弹窗
        }
      }, 1000); // 每秒更新一次
    },
    beforeDestroy() {
      // 组件销毁前清除定时器
      if (this.countdownInterval) {
        clearInterval(this.countdownInterval);
      }
    },
    // 从本地存储中获取主题
    getTheme() {
      return uni.getStorageSync('theme') || 'dark'; // 如果没有设置主题，则默认为'dark'
    },
    // 设置主题到本地存储
    setTheme(theme) {
      uni.setStorageSync('theme', theme);
      // 更新currentTheme以保持与本地存储同步（可选）
      this.currentTheme = theme;
    },
    // 点击主题色
    tozuti() {
      var that = this;
      this.bgC = !this.bgC;
      that.app.background = this.bgC;
      const newTheme = this.currentTheme == 'dark' ? 'light' : 'dark';
      this.setTheme(newTheme); // 调用setTheme方法更新本地存储和currentTheme
    },
    // 点击公众号
    xxx() {
      this.gzh = false;
    },
    // 点击客服
    tokefu() {
      this.isShow = !this.isShow;
    },
    // 轮播图跳转
    lunpig(index) {
      console.log(444444, index);
      if (index == '0') {
        console.log(8888, this.swiperList[index].path);
        if (this.swiperList[index].path.includes('http://') || this.swiperList[index].path.includes('https://')) {
          uni.navigateTo({
            url: '/pages/common/web?url=' + this.swiperList[index].path
          });
        } else {
          uni.navigateTo({
            url: this.swiperList[index].path
          });
        }
      } else if (index == '1') {
        console.log(7777, this.swiperList[index].path);
        if (this.swiperList[index].path.includes('http://') || this.swiperList[index].path.includes('https://')) {
          console.log(222);
          uni.navigateTo({
            url: '/pages/common/web?url=' + this.swiperList[index].path
          });
        } else {
          uni.navigateTo({
            url: this.swiperList[index].path
          });
        }
      }
    },
    getInitData() {
      uni.request({
        method: 'get',
        url: _this.app.apiHost + '/init',
        header: { Authorization: '' },
        success: (data) => {
          this.siteConfig = data.data.data;
          console.log(111111111111, data);
        }
      });
    },

    getVal(e) {
      this.keyword = e;
    },
    handlerSwitch() {
      uni.switchTab({
        url: '/pages/card/card'
      });
    },
    handlerChange(e) {
      let { current } = e.detail;
      this.bgIndex = current;
    },
    clickItem(e) {
      this.swiperDotIndex = e;
    },
    change(e) {
      this.swiperDotIndex = e.detail.current;
    },
    search(e) {
      console.log(e);
      uni.setStorageSync('keyword', e);
      uni.navigateTo({
        url: './search?keys=' + e
      });
    },
    getData() {
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/index',
        header: { Authorization: '' },
        success: (data) => {
          console.log(data.data.code);
          if (data.data.code == 0) {
            let da = data.data.data;
            console.log(da);
            _this.swiperList = da.swiperList;
            _this.noticeList = da.news;
            _this.navlist = da.navlist;
            uni.setStorageSync('navlist', JSON.stringify(da.navlist));
            _this.avatar = da.hots;
            console.log(da.hots);
            _this.iszhekou = data.hots;
            if (data.data.data.ad != null) {
              _this.isPopupVisible = true;
              _this.tit = data.data.data.ad.title;
              _this.imga = data.data.data.ad.full_image;
              _this.ids = data.data.data.ad.id;
            } else {
              _this.isPopupVisible = false;
            }
            _this.loading = true;
            uni.hideLoading();
          } else {
            uni.showToast({
              title: '数据错误',
              position: 'bottom',
              icon: 'error'
            });
          }
        },
        fail(a) {
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    },
    toChild(e) {
      let type = e.currentTarget.dataset.typeid,
        cid = e.currentTarget.dataset.id;
      uni.setStorageSync('cid', cid);
      uni.setStorageSync('typeid', type);
      uni.navigateTo({
        url: '../index/card?cid=' + cid + '&typeid=' + type
      });
    },
    goCard(a) {
      uni.setStorageSync('a', a);
      uni.switchTab({
        url: '../card/card?type=' + a
      });
    },
    news() {
      uni.navigateTo({
        url: 'news'
      });
    }
  }
};
</script>

<style lang="scss">
::v-deep .u-popup__content {
  margin: 0 20rpx;
  margin-top: 25%;
}
::v-deep .u-safe-area-inset-bottom {
  padding: 0 !important;
}
.intro {
  background-color: #f7f7f7 !important;
}
/* 定义主题样式 */
.theme-dark {
  background-color: #151518 !important;
  // color: #fff !important;
  color: #ffefcd !important;
}

.theme-light {
  background-color: #fff !important;
  color: #000 !important;
}
// 弹窗广告
.jued {
  .ss {
    font-size: 25rpx;
    background-color: #999;
    border-radius: 30rpx;
    position: absolute;
    top: 20rpx;
    right: 30rpx;
    padding: 10rpx 20rpx;
  }
  .prop {
    text-align: center;
    padding: 30rpx;
  }
  //弹窗图片
  .tipian {
    height: 240px;
    width: 320px;
  }
  position: relative;
  // color: #000;
}

.flexagren {
  justify-content: space-around;
}
.swiper-wrapper {
  width: 750rpx;
  height: 300rpx;
  position: relative;
  z-index: 2;
}
.swiper-item {
  transition: all 0.3s;
  height: 260rpx !important;
  margin: 0 30rpx;
  /* #ifdef MP-ALIPAY */
  margin: 0 30rpx;
  /* #endif */
  border-radius: 16rpx;
  overflow: hidden;
  image {
    height: 100%;
    border-radius: 16rpx;
  }
}
.swiper-item-content {
  width: 690rpx;
  height: 100%;
}
.swiper-scale {
  height: 300rpx !important;
  image {
    height: 100%;
  }
  // transform: scale(1.1);
}
uni-swiper .uni-swiper-dots-horizontal {
  bottom: 30px;
}

.uni-searchbar {
  margin: auto;
  width: 100%;
}
.bg-red {
  background-color: #e54d4278;
}
.bg-orange {
  background-color: #f37b1d96;
}
.bg-green {
  background-color: #6739b6a1;
}
.bg-purple {
  background-color: #e0399794;
}
.bg-blue {
  background-color: #0081ff94;
}
.bg-pink {
  background-color: #e0399794;
}

.notice {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: #272735;
  border-radius: 16rpx;
  width: 100%;
  padding: 20rpx 26rpx 20rpx 16rpx;
  color: #c2c2e4;
}

.grid.col-3.grid-square > uni-view {
  padding-top: 10upx;
  padding-bottom: calc((100% - 70px) / 3);
}

.notice .notice-left {
  display: block;
  float: left;
  width: 120rpx;
  height: 60rpx;
  font-size: 50rpx;
  margin-left: 3px;
  margin-right: 24rpx;
}

.notice .swiper-nav {
  float: left;
  height: 80rpx;
  line-height: 80rpx;
  width: 502rpx;
  color: #c2c2e4;
  .right {
    width: 502rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.bg-img {
  // width: 25%;
  // margin-top: 44rpx;
  padding: 40rpx !important;
  // margin-right: 20rpx;
  // margin-bottom: 20rpx;
}
.bg-img > text {
  display: block;
  text-align: center;
  margin-top: 12rpx;
}

.yuan {
  width: 130rpx;
  height: 130rpx;
  line-height: 130rpx;
  margin: auto;
  overflow: hidden;
}

.yuan image {
  width: 90%;
  height: 90%;
  vertical-align: middle;
}

.rsd {
  border-radius: 8rpx;
}

.waptu {
  width: 100%;
}

.waptu image {
  width: 35rpx;
  height: 49rpx !important;
}

.margin-top-buttom {
  margin: 16rpx auto;
  overflow: hidden;
  height: 60rpx;
  line-height: 60rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
}

.uni-searchbar {
  padding-top: 0;
  padding-bottom: 0;
}

.topa {
  width: 100%;
  background-color: #00c4ff;
  display: flex;
  justify-content: space-around;
  padding: 50rpx;
  padding-bottom: 100rpx;
  color: #fff;
}
.topa-a {
  font-size: 32px;
  font-weight: 600;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
}
.topa-a text {
}

.topa-b {
}
.topa-b .b-title {
  font-size: 20px;
  margin-bottom: 10px;
}
.as {
  position: relative;
}
.sou {
  position: absolute;
  bottom: -20px;
  width: 100%;
}
.heise {
  background-color: #e9e9e9;
  height: 8px;
}
.renmen {
  font-size: 32rpx;
  padding-left: 5px;
  .title {
    background: linear-gradient(180deg, #f0c68a 0%, #fff4cc 42%, #f3c685 93%);
    -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
  }
}
.hot-item {
  width: 336rpx;
  padding: 20rpx;
  padding-right: 0;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  // border: 2rpx solid #2c2c3d;
  // background-color: #292938;
  .title {
    // color: #fcecc9;
  }
  .btn-exchange {
    width: 140rpx;
    height: 48rpx;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    opacity: 0.9;
    // color: #787896;
    margin-top: 28rpx;
    font-size: 24rpx;
    border: 2rpx solid #505067;
  }
}
</style>
